<template>
  <div class="menu_wrap">
      <el-menu :collapse="mycollapse" text-color="#ffffff" background-color="#1a225a"
      active-text-color="#ffff00"
      :collapse-transition="true"
       :router="true">
          <el-menu-item index="/layout">
              <i class="el-icon-setting"></i>
              <span slot="title">首页</span>
          </el-menu-item>
          <!-- 带二级菜单的导航 -->
        <el-submenu index="1">
              <!-- 二级菜单的标题 -->
              <template slot="title">
                  <i class="el-icon-user-solid"></i>
                    <span >用户管理</span>
                </template>

                <el-menu-item index="/layout/admin">
                  <i class="el-icon-s-check"></i>
                      <span slot="title">管理员</span>
                </el-menu-item>
                <el-menu-item index="/layout/student">
                   <i class="el-icon-s-ticket"></i>
                      <span slot="title">学员管理</span>
                </el-menu-item>
        </el-submenu>
        <!-- 带分组的二级菜单 -->
        <el-submenu index="2">
              <template slot="title">
                  <i class="el-icon-message-solid"></i>
                    <span >课程管理</span>
                </template>
                <!-- 二级菜单下的分组 -->
                <el-menu-item-group>
                     <template  slot="title">课程</template>
                        <el-menu-item index="/layout/courseList">
                            <i class="el-icon-s-order"></i>
                            <span slot="title">课程列表</span>
                      </el-menu-item>
                        <el-menu-item index="/layout/courseAdd">
                            <i class="el-icon-picture"></i>
                            <span slot="title">课程添加</span>
                      </el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                    <template slot="title">视频</template>
                      <el-menu-item index="/layout/videolist">
                            <i class="el-icon-s-tools"></i>
                            <span slot="title">视频列表</span>
                      </el-menu-item>
                       <el-menu-item>
                            <i class="el-icon-warning"></i>
                            <span slot="title">视频编辑</span>
                      </el-menu-item>
                </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="/grid">
              <i class="el-icon-setting"></i>
              <span slot="title">网格大屏</span>
        </el-menu-item>
      </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Vuepro2209MenuCom',

  data() {
    return {
      mycollapse:false //控制菜单是否折叠
    };
  },
  created() {
    // 接受兄弟组件传来的值
    this.$bus.$on('tocollapse',(val)=>{
        this.mycollapse=val;
    })
  },
  mounted() {
    
  },

  methods: {
    
  },
};
</script>
<style lang="less">
  .menu_wrap{
    width:100%;
    background:pink;
  }
</style>